<template>
	<view>
		<u-field placeholder-style="color:#757575;font-size:14px !important;"  v-model="basic.fullname" required label="姓名" placeholder="请填写" class="reset_after" />
		<view class="sex_box">
			<u-field  required class="reset_after" name="sex" label="性别">
				<u-radio-group slot="right" v-model="basic.sex" direction="horizontal" icon-size="14px">
					<u-radio name="1">男</u-radio>
					<u-radio name="2">女</u-radio>
				</u-radio-group>
			</u-field>
		</view>
		<view class="form-line u-border-bottom " @click="showPickerBirthday = !showPickerBirthday">
			<view class="form-field">
				<view class="label">
					出生日期
				</view>
				<view :class="basic.birthday ? 'text' : 'text ac'">
					{{basic.birthday ? basic.birthday : '点击选择出生日期'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-picker mode="time" v-model="showPickerBirthday" title="选择出生日期" :start-year="minDate"
			:end-year="maxBirthdayDate" :default-time="defaultBirthdayDate" @confirm="onConfirmBirthday"
			@cancel="showPickerBirthday = false" />
		<view class="form-line u-border-bottom " @click="showPickerEdu = !showPickerEdu">
			<view class="form-field">
				<view class="label">
					最高学历
				</view>
				<view :class="basic.educationName ? 'text' : 'text ac'">
					{{basic.educationName ? basic.educationName : '点击选择学历'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-picker mode="selector" v-model="showPickerEdu" :range="columnsEdu" range-key="text"
			@confirm="onConfirmEducation" @cancel="showPickerEdu = false" />
		<view class="form-line u-border-bottom " @click="showPickerEnterJob = !showPickerEnterJob">
			<view class="form-field">
				<view class="label" style="width: 208rpx;">
					开始工作时间
				</view>
				<view :class="basic.enter_job_time_name ? 'text' : 'text ac'">
					{{basic.enter_job_time_name ? basic.enter_job_time_name : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-select v-model="showPickerEnterJob" mode="mutil-column-auto" :list="columnsWage2" @confirm="onConfirmWage2"></u-select>
		<u-field placeholder-style="color:#757575;font-size:14px !important;"  required v-model="contact.mobile" label="联系电话" placeholder="请填写联系电话" class="reset_after"
			@input="hanlderMobile"
			 />
		<!-- <u-field :clearable="false" v-model="contact.weixin" label="联系微信" placeholder="请填写联系微信" class="reset_after"
			@input="hanlderWeixin" /> -->
		<!-- <view class="for_btn">
			<view class="sync_phone">
				<u-checkbox v-model="checkedEditPhone" icon-size="32rpx" @change="handlerSync">
					同手机号
				</u-checkbox>
			</view>
		</view> -->
		<view class="form_split_18"></view>
		<view class="form-line u-border-bottom" @click="showPickerJobCategory = !showPickerJobCategory">
			<view class="form-field">
				<view class="label">
					期望职位
				</view>
				<view :class="intention.categoryName ? 'text' : 'text ac'">
					{{intention.categoryName ? intention.categoryName : '点击选择期望职位'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-popup mode="bottom" v-model="showPickerJobCategory" height="900rpx" width="100%" ref="dropCategory">
			<JobCategoryFilter :categories="[intention.category1, intention.category2, intention.category3]"
				:type="false" @doSelect="doSelectCategory" :all="false"></JobCategoryFilter>
		</u-popup>

		<view class="form-line u-border-bottom" @click="showPickerWage = !showPickerWage">
			<view class="form-field">
				<view class="label">
					期望薪资
				</view>
				<view :class="intention.wageName ? 'text' : 'text ac'">
					{{intention.wageName ? intention.wageName : '点击选择薪资'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<!-- <u-picker v-model="showPickerWage" :range="columnsWage" mode="multiSelector" :default-time="defaultWageAry"
			@confirm="onConfirmWage" @columnchange="onChangeWage" @cancel="showPickerWage = false" /> -->
			
		<u-select
		:default-value="defaultWageAry"
		v-model="showPickerWage" 
		mode="mutil-column-auto" 
		:list="columnsWage" 
		@confirm="onConfirmWage"
		@cancel="showPickerWage = false" 
		>
		</u-select>
			
		<view class="form-line u-border-bottom" @click="showPickerDistrict = !showPickerDistrict">
			<view class="form-field">
				<view class="label">
					期望地区
				</view>
				<view :class="intention.districtName ? 'text' : 'text ac'">
					{{intention.districtName ? intention.districtName : '点击选择期望地区'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-popup v-model="showPickerDistrict" mode="bottom" width="100%" height="900rpx" ref="dropDistrict">
			<DistrictFilter :districts="[intention.district1, intention.district2, intention.district3]" :type="false"
				@doSelect="doSelectDistrict"></DistrictFilter>
		</u-popup>
		<view class="form-line u-border-bottom" @click="showPickerCurrent = !showPickerCurrent">
			<view class="form-field">
				<view class="label">
					求职状态
				</view>
				<view :class="basic.currentName ? 'text' : 'text ac'">
					{{basic.currentName ? basic.currentName : '点击选择求职状态'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-picker mode="selector" v-model="showPickerCurrent" :range="columnsCurrent" range-key="text"
			@confirm="onConfirmCurrent" @cancel="showPickerCurrent = false" />
		<view v-if="isShowAddExpBox">
			<view class="form_split_title">最近一份工作经历</view>
			<u-field placeholder-style="color:#757575;font-size:14px !important;"   v-model="work.companyname" required label="公司名称" placeholder="请输入" class="reset_after" />
			<u-field placeholder-style="color:#757575;font-size:14px !important;"   v-model="work.jobname" required name="jobs" label="职位名称" placeholder="请输入" class="reset_after" />
			<view class="form-line u-border-bottom" @click="showPickerStartDate = true">
				<view class="form-field">
					<view class="label">
						入职时间
					</view>
					<view :class="work.starttime ? 'text' : 'text ac'">
						{{work.starttime ? work.starttime : '点击选择入职时间'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>
			<u-select v-model="showPickerStartDate" mode="mutil-column-auto" :list="columnsWage3" @confirm="onConfirmWage3"></u-select>
			<view class="form-line u-border-bottom" @click="showPickerEndDate = true">
				<view class="form-field">
					<view class="label"> 
						离职时间
					</view>
					<view :class="work.endtimeName ? 'text' : 'text ac'">
						{{work.endtimeName ? work.endtimeName : '点击选择离职时间'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>
			<u-select v-model="showPickerEndDate" mode="mutil-column-auto" :list="columnsWage1"
				@confirm="onConfirmWage1"></u-select>
			<u-field placeholder-style="color:#757575;font-size:14px !important;"  required disabled label="工作职责" class="reset_after no_border" />
			<view v-show="isDutyTextarea" @click="handleIsDuty"
				:class="isDutyTextarea && work.duty == '' ? 'textarea textarea-color' : 'textarea'">
				{{work.duty ? work.duty : '简单描述一下你的工作职责'}}
			</view>
			<textarea 
			maxlength="-1" 
			class="textarea2" 
			v-show="!isDutyTextarea" 
			:focus="isDutyFocus" 
			:value="work.duty"
			@blur="handleIsDuty"
			@input="handleInput"
			placeholder="简单描述一下你的工作职责"
			>
			</textarea>
		</view>
		<view style="margin: 32rpx;">
			<u-button shape="circle" type="primary" @click="handleSubmit">
				下一步
			</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import JobCategoryFilter from '@/components/JobCategoryFilter'
	import DistrictFilter from '@/components/DistrictFilter'

	export default {
		name: 'RegFormStep1',
		components: {
			JobCategoryFilter,
			DistrictFilter
		},
		data() {
			return {
				isDutyFocus:false,
				isDutyTextarea: true,
				defaultBirthdayDate: '',
				dateParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				defaultWageAry: [0, 0],
				showPickerEndDate: false,
				showPickerStartDate: false,
				showPickerCurrent: false,
				showPickerDistrict: false,
				showPickerBirthday: false,
				showPickerEdu: false,
				showPickerEnterJob: false,
				checkedEditPhone: true,
				showPickerJobCategory: false,
				showPickerWage: false,
				minDate: '',
				maxDate: '',
				maxBirthdayDate: '',
				basic: {
					fullname: '',
					sex: '1',
					birthday: '',
					education: '',
					educationName: '',
					enter_job_time: '',
					enter_job_time_name: '',
					current: '',
					currentName: ''
				},
				contact: {
					mobile: '',
					weixin: ''
				},
				intention: {
					categoryName: '',
					category1: '',
					category2: '',
					category3: '',
					wageName: '',
					minwage: '',
					maxwage: '',
					districtName: '',
					district1: '',
					district2: '',
					district3: ''
				},
				work: {
					companyname: '',
					jobname: '',
					starttime: '',
					endtime: '',
					endtimeName: '',
					todate: 0,
					duty: ''
				},
				duty2:'',
				isShowAddExpBox: false,
				isNoJobTime: false
			}
		},
		onReady() {
			this.defaultBirthdayDate = (new Date().getFullYear() - 16) + '-' + (new Date().getMonth() + 1)
		},
		mounted() {
			this.initDate()
			this.$store.dispatch('getClassify', 'citycategory')
			this.$store.dispatch('getClassify', 'education')
			this.$store.dispatch('getClassify', 'current')
			this.$store.dispatch('getClassifyWage')
			this.contact.mobile = this.$store.state.userMobile
			this.contact.weixin = this.$store.state.userMobile
		},
		computed: {
			columnsEdu() {
				return this.$store.state.classifyEdu
			},
			columnsWage() {
				var classifyWage1 = this.$store.state.classifyWage
				var index1 = 0
				var list1 = []
				for (let key in classifyWage1) {
					index1++
					list1.push({
						value: index1,
						label: key,
						children2:classifyWage1[key]
					})
				}
				for (var i = 0; i < list1.length; i++) {
					let children = list1[i].children2
					let item = list1[i]
					if(children.length > 0){
						var item2 = []
						for (var i2 = 0; i2 < children.length; i2++) {
							item2.push({
								value: item.value + '-' + (i2 + 1),
								label: children[i2],
							}) 
							list1[i].children = item2
						}
					} else {
						list1[i].children = []
					}
				}
				return list1
				
				// return [
				// 	Object.keys(this.$store.state.classifyWage),
				// 	this.$store.state.classifyWage[500]
				// ]
			},
			columnsWage1() {
				return this.date()
			},
			columnsWage2() {
				return this.date2()
			},
			columnsWage3() {
				return this.date3()
			},
			columnsCurrent() {
				return this.$store.state.classifyCurrent
			},
			columnsJobCategory() {
				return this.$store.state.classifyJobCategory
			},
			areaDistrict() {
				return this.$store.state.classifyCityCategory
			}
		},
		methods: {
			onConfirmWage1(values) {
				// 修改
				if(values[0].label == '至今'){
					this.work.endtime = ''
					this.work.endtimeName = '至今'
					this.work.todate = 1
				} else {
					var y = parseInt(values[0].label)
					var m = parseInt(values[1].label) >= 10 ? parseInt(values[1].label) : '0' + parseInt(values[1].label)
					this.work.endtime = y + '-' + m
					this.work.endtimeName = y + '-' + m
					this.work.todate = 0
				}
			},
			// 离职时间
			date() {
			  const nowDate = new Date()
			  const nowYear = nowDate.getFullYear()
			  const minYear = nowYear - 59
			  const month = nowDate.getMonth() + 1;
			  const yearArr = ['至今']
			  const monthArr = []
			  const monthArr1 = []
			  const arr = []
			  for (let i = 0; i < nowYear - minYear; i++) {
				yearArr.push((nowYear - i) + '年')
			  }
			  for (let j = 0; j < 12; j++) {
				  var m = (j + 1) >= 10 ? (j + 1) : '0' + (j + 1)
				monthArr.push({
				  value: m + '月' ,
				  label: m + '月'
				})
				monthArr1.push('')
			  }
			  for (let k = 0; k < yearArr.length; k++) {
				if (yearArr[k] == '至今') {
				  arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children:monthArr1
				  })
				} else {
				  arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children: monthArr
				  })
				}
			  }
			  arr[1].children = arr[1].children.slice(0,month)
			  return arr
			},
			// 开始工作时间
			onConfirmWage2(values) {
				// 修改
				if(values[0].label == '无工作经验'){
					this.basic.enter_job_time = ''
					this.basic.enter_job_time_name = '无工作经验'
					this.isShowAddExpBox = false
					this.isNoJobTime = true
				} else {
					var y = parseInt(values[0].label)
					var m = parseInt(values[1].label) >= 10 ? parseInt(values[1].label) : '0' + parseInt(values[1].label)
					this.basic.enter_job_time =  y + '-' + m
					this.basic.enter_job_time_name = y + '-' + m
					this.isShowAddExpBox = true
					this.isNoJobTime = false
				}
			},
			date2() {
			  const nowDate = new Date()
			  const nowYear = nowDate.getFullYear()
			  const minYear = nowYear - 59
			  const month = nowDate.getMonth() + 1;
			  const yearArr = ['无工作经验']
			  const monthArr = []
			  const monthArr1 = []
			  const arr = []
			  for (let i = 0; i < nowYear - minYear; i++) {
				yearArr.push((nowYear - i) + '年')
			  }
			  for (let j = 0; j < 12; j++) {
				var m = (j + 1) >= 10 ? (j + 1) : '0' + (j + 1)
				monthArr.push({
				  value: m + '月' ,
				  label: m + '月'
				})
				monthArr1.push('')
			  }
			  for (let k = 0; k < yearArr.length; k++) {
				if (yearArr[k] == '无工作经验') {
				  arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children:monthArr1
				  })
				} else {
				  arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children: monthArr
				  })
				}
			  }
			  arr[1].children = arr[1].children.slice(0,month)
			  return arr
			},
			// 入职时间
			onConfirmWage3(values) {
				var y = parseInt(values[0].label)
				var m = parseInt(values[1].label) >= 10 ?  parseInt(values[1].label) : '0' + parseInt(values[1].label)
				this.work.starttime = y + '-' + m
			},
			date3() {
			  const nowDate = new Date()
			  const nowYear = nowDate.getFullYear()
			  const month = nowDate.getMonth() + 1;
			  const minYear = nowYear - 59
			  const yearArr = []
			  const monthArr = []
			  const arr = []
			  for (let i = 0; i < nowYear - minYear; i++) {
			  	yearArr.push((nowYear - i) + '年')
			  }
			  for (let j = 0; j < 12; j++) {
				var m = (j + 1) >= 10 ? (j + 1) : '0' + (j + 1)
				monthArr.push({
				  value: m + '月' ,
				  label: m + '月'
				})
			  }
			  for (let k = 0; k < yearArr.length; k++) {
				arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children: monthArr
				})
			  }
			  arr[0].children = arr[0].children.slice(0,month)
			  return arr
			},
			handleIsDuty() {
				if(this.duty2 != ''){
					this.work.duty =  this.duty2
				}
				this.isDutyFocus = !this.isDutyFocus
				this.isDutyTextarea = !this.isDutyTextarea
			},
			hanlderMobile() {
				if (this.contact.weixin !== this.contact.mobile) {
					this.checkedEditPhone = false
				} else {
					this.checkedEditPhone = true
				}
			},
			hanlderWeixin() {
				if (this.contact.weixin !== this.contact.mobile) {
					this.checkedEditPhone = false
				} else {
					this.checkedEditPhone = true
				}
			},
			handlerSync() {
				if (!this.checkedEditPhone) {
					this.contact.weixin = this.contact.mobile
				}
			},
			// 设置日期插件默认值
			initDate() {
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let nowMonth = nowDate.getMonth()+1
				this.minDate = nowYear - 59
				this.maxDate = nowYear
				this.maxBirthdayDate = nowYear - 16
			},
			doSelectCategory(data) {
				this.intention.category1 = data[0]
				this.intention.category2 = data[1]
				this.intention.category3 = data[2]
				this.intention.categoryName = data[3]
				this.showPickerJobCategory = !this.showPickerJobCategory
			},
			doSelectDistrict(data) {
				this.intention.district1 = data[0]
				this.intention.district2 = data[1]
				this.intention.district3 = data[2]
				this.intention.districtName = data[3]
				this.showPickerDistrict = !this.showPickerDistrict
			},
			// onChangeWage(values) {
			// 	let {column,index} = values
			// 	if(!column){
			// 		let values = this.columnsWage[column][index]
			// 		this.$set(this.columnsWage,1,this.$store.state.classifyWage[values])
			// 		this.$forceUpdate();
			// 	}
			// },
			onConfirmBirthday(value) {
				var {
					year,
					month,
					day
				} = value
				this.basic.birthday = year + '-' + month + '-' + day
				this.showPickerBirthday = !this.showPickerBirthday
			},
			onConfirmCurrent(value) {
				let [index] = value
				this.basic.current = this.columnsCurrent[index].id
				this.basic.currentName = this.columnsCurrent[index].text
				this.showPickerCurrent = !this.showPickerCurrent
			},
			// onConfirmWage(values) {
			// 	let [column1, column2] = values
			// 	let column_text_1 = this.columnsWage[0][column1]
			// 	let column_text_2 = this.columnsWage[1][column2 ? column2 : 0]
			// 	this.intention.minwage = parseInt(column_text_1)
			// 	this.intention.maxwage = parseInt(column_text_2)
			// 	this.intention.wageName = `${parseInt(column_text_1)}-${parseInt(column_text_2)}元`
			// 	this.showPickerWage = !this.showPickerWage
			// },
			// 选择期望薪资
			onConfirmWage(values) {
				var [columnObj1,columnObj2] = values
				this.intention.minwage = parseInt(columnObj1.label)
				this.intention.maxwage = parseInt(columnObj2.label)
				this.intention.wageName = `${parseInt(columnObj1.label)}-${parseInt(columnObj2.label)}元`
				
				for (var i = 0; i < this.columnsWage.length; i++) {
					let item = this.columnsWage[i]
					if(columnObj1.label == item.label){
						for (var i2 = 0; i2 < item.children.length; i2++) {
							let item2 = item.children[i2]
							if(columnObj2.label == item2.label){
								this.defaultWageAry = [i,i2]
							}
						}
					}
				}
				this.showPickerWage = !this.showPickerWage
			},
			onConfirmEducation(value) {
				let [index] = value
				this.basic.education = this.columnsEdu[index].id
				this.basic.educationName = this.columnsEdu[index].text
				this.showPickerEdu = !this.showPickerEdu
			},
			handleInput(e){
				this.duty2 = e.detail.value
			},
			handleSubmit() {
				this.work.duty =  this.duty2
				if (!this.basic.fullname) {
					this.$refs.uTips.show({
						title: '请填写姓名',
						type: 'error'
					})
					return false
				}
				if (!this.basic.sex) {
					this.$refs.uTips.show({
						title: '请选择性别',
						type: 'error'
					})
					return false
				}
				if (!this.basic.birthday) {
					this.$refs.uTips.show({
						title: '请选择出生日期',
						type: 'error'
					})
					return false
				}
				if (!this.basic.education) {
					this.$refs.uTips.show({
						title: '请选择学历',
						type: 'error'
					})
					return false
				}
				if (!this.isNoJobTime) {
					if (!this.basic.enter_job_time) {
						this.$refs.uTips.show({
							title: '请选择开始工作时间',
							type: 'error'
						})
						return false
					}
				}
				if (!this.contact.mobile) {
					this.$refs.uTips.show({
						title: '请填写联系电话',
						type: 'error'
					})
					return false
				}
				// if (!this.contact.weixin) {
				// 	this.$refs.uTips.show({
				// 		title: '请填写联系微信',
				// 		type: 'error'
				// 	})
				// 	return false
				// }
				if (!this.intention.category1) {
					this.$refs.uTips.show({
						title: '请选择期望职位',
						type: 'error'
					})
					return false
				}
				if (!this.intention.minwage || !this.intention.maxwage) {
					this.$refs.uTips.show({
						title: '请选择薪资',
						type: 'error'
					})
					return false
				}
				if (!this.intention.district1) {
					this.$refs.uTips.show({
						title: '请选择期望地区',
						type: 'error'
					})
					return false
				}
				if (!this.basic.current) {
					this.$refs.uTips.show({
						title: '请选择求职状态',
						type: 'error'
					})
					return false
				}
				let dataValue = {
					basic: {
						fullname: this.basic.fullname,
						sex: this.basic.sex,
						birthday: this.basic.birthday,
						education: this.basic.education,
						enter_job_time: this.basic.enter_job_time,
						current: this.basic.current
					},
					contact: {
						mobile: this.contact.mobile,
						weixin: this.contact.weixin
					},
					intention: {
						category1: this.intention.category1,
						category2: this.intention.category2,
						category3: this.intention.category3,
						minwage: this.intention.minwage,
						maxwage: this.intention.maxwage,
						district1: this.intention.district1,
						district2: this.intention.district2,
						district3: this.intention.district3
					}
				}
				if (this.isShowAddExpBox) {
					if (!this.work.companyname) {
						this.$refs.uTips.show({
							title: '请填写公司名称',
							type: 'error'
						})
						return false
					}
					if (!this.work.jobname) {
						this.$refs.uTips.show({
							title: '请填写职位名称',
							type: 'error'
						})
						return false
					}
					if (!this.work.starttime) {
						this.$refs.uTips.show({
							title: '请选择入职时间',
							type: 'error'
						})
						return false
					}
					if (parseInt(this.work.todate) === 0) {
						if (!this.work.endtime) {
							this.$refs.uTips.show({
								title: '请选择离职时间',
								type: 'error'
							})
							return false
						}
					}
					if (!this.work.duty) {
						this.$refs.uTips.show({
							title: '请填写工作职责',
							type: 'error'
						})
						return false
					}
					Object.assign(dataValue, {
						work: {
							companyname: this.work.companyname,
							jobname: this.work.jobname,
							starttime: this.work.starttime,
							endtime: this.work.endtime,
							todate: this.work.todate,
							duty: this.work.duty
						}
					})
				}
				http.post(api.reg_resume_form_step1, dataValue)
					.then(res => {
						if(res.data.code == 200){
							uni.navigateTo({
								url:'/personal/AddResumeByForm/RegFormStep2'
							})
							this.duty2 = ''
							this.work.duty =  ''
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sex_box {
		/deep/ .fild-body {
			/deep/ .u-flex {
				flex: 0;
			}
		}
	}

	.edit_phone {
		position: absolute;
		right: 24rpx;
		top: -200rpx;
		font-size: 28rpx;
		color: #2199ff;
		padding: 26rpx 0;
		line-height: 48rpx;
	}

	.sync_phone {
		position: absolute;
		right: 24rpx;
		top: -100rpx;
		font-size: 28rpx;
		color: #515151;
		padding: 26rpx 0;
		line-height: 48rpx;
		z-index: 10;
	}
</style>
